<template>
    <header>
        <nav class="header-wrapper card-opacity">
            <div class="header-inner">
                <div style="display: flex">
                    <div class="fl">
                        <div class="logo">
                            <a style="height: 28px" href="#">
                                <img
                                    height="28"
                                    src="https://img.bidianer.com/image/logo/logo.png"
                                    alt="笔点资源LOGO"
                                />
                            </a>
                        </div>
                    </div>

                    <ul class="nav-links">
                        <lls-tabs v-model="activeName" @tab-click="handleClick">
                            <lls-tab-pane
                                v-for="tab in tabs"
                                :label="tab.label"
                                :name="tab.name"
                                :key="tab.name"
                            >
                                <span slot="label">
                                    {{ tab.label }}
                                </span>
                            </lls-tab-pane>
                        </lls-tabs>
                    </ul>
                    <div class="time-clock">
                        <strong>06</strong>
                        <span>月</span>
                        <strong>04</strong>
                        <span>日</span>
                        <span>15:12 周二</span>
                    </div>
                    <div class="weather">
                        <div class="weather-btn">
                            <span>南京</span>
                            <span class="icon">
                                <img
                                    height="20"
                                    src="https://img.bidianer.com/weather/baidu/duoyun.svg"
                                    alt=""
                                />
                            </span>
                            <span>多云</span>
                            <span>&nbsp; 29°C</span>
                        </div>
                    </div>
                </div>
                <div class="flex-between">
                    <div class="login">
                        <a class="login-btn" href="#">登录</a>
                        <a class="register-btn" href="#">立即注册</a>
                    </div>
                </div>
            </div>
            <!-- <div class="header-wrapper-right">
                <a href="#">登录</a>
                <a href="#" class="register-btn">立即注册</a>
            </div> -->
        </nav>
    </header>
</template>

<script>
export default {
    name: "HeaderComponent",
    data() {
        return {
            activeName: "homepage",
            tabs: [
                {
                    name: "homepage",
                    label: "首页",
                },
                {
                    name: "find",
                    label: "发现",
                },
                {
                    name: "HelpCenter",
                    label: "帮助中心",
                },

                {
                    name: "Plugins",
                    label: "插件",
                },
            ],
            //
        };
    },
    methods: {
        handleClick(tab, event) {
            console.log(tab, event);
        },
    },
};
</script>

<style scoped lang="scss">
.header-wrapper {
    box-shadow: 0 1px 3px rgba(26, 26, 26, 0.1);
    box-sizing: border-box;
    height: 60px;
    left: 0;
    overflow: hidden;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 200;
    display: flex;
    .header-inner {
        width: 1540px;
        padding: 0 30px;
        display: flex;
        justify-content: space-between;
        margin: 0 auto;
        .fl {
            float: left;
            align-items: center;
            display: flex;
            height: 60px;
            overflow: hidden;
            .logo {
                width: 140px;
                align-items: center;
                display: flex;
                height: 60px;
                overflow: hidden;
            }
        }
        .nav-links {
            height: 60px;
            line-height: 60px;
        }
        .time-clock {
            margin: 7px 0 0 10px;
            color: #6b7386;

            strong {
                font-size: 26px;
                padding: 0 9px;
            }
        }
        .weather {
            margin-left: 50px;
            .weather-btn {
                align-items: center;
                cursor: pointer;
                display: flex;
                height: 60px;
                overflow: hidden;
                span {
                    display: block;
                    height: 23px;
                    line-height: 23px;
                    overflow: hidden;
                    color: #6b7386;
                }
                .icon {
                    padding: 1px 8px 0;
                }
            }
        }
        .flex-between {
            float: right;
            display: flex;
            justify-content: space-between;
            .login {
                height: 60px;
                float: right;
                display: flex;
                align-items: center;
                .login-btn {
                    border-radius: 2px;
                    color: #0084ff;
                    display: block;
                    margin-left: 15px;
                    padding: 5px 10px;
                    text-decoration: none;
                }
            }
        }
    }
}
::v-deep .lls-tabs__active-bar.is-top::after {
    display: none;
}
.card-opacity {
    background: #fff;
}

.header-wrapper-right a {
    text-decoration: none;
    color: #000;
    margin-left: 10px;
}

.register-btn {
    background-color: var(--primary-color);
    color: #fff;
    padding: 5px 10px;
    border-radius: 5px;
}
</style>
